<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="./dist/css/swiper.min.css">
    <link rel="stylesheet" href="./css/main.css">

    <!-- Demo styles -->
    <style>
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    </style>
</head>
<body>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
             <div class="section first current" style="width: 100%;height: 100%;background-color: #0da5d6">
                 <!-- LOGO -->
                 <div class="logo"></div>
                 <!-- 文字 -->
                 <div class="text" style="z-index: 6">
                     <img src="./images/text_1.png" alt="">
                     <img src="./images/text_2.png" alt="">
                     <img src="./images/text_3.png" alt="">
                     <img src="./images/text_4.png" alt="">
                     <img src="./images/text_5.png" alt="">
                     <img src="./images/text_6.png" alt="">
                     <img src="./images/text_7.png" alt="">
                     <img src="./images/text_8.png" alt="">
                 </div>
                 <!-- 信息 -->
                 <div class="info"></div>
             </div>


            </div>
            <div class="swiper-slide">
                <div class="section second current"style="width:100%;height:100%;background-color: #2AB561;">
                    <!-- 盾牌 -->
                    <div class="shield">
                        <img src="./images/shield_1.png" alt="">
                        <img src="./images/shield_2.png" alt="">
                        <img src="./images/shield_3.png" alt="">
                        <img src="./images/shield_4.png" alt="">
                        <img src="./images/shield_5.png" alt="">
                        <img src="./images/shield_6.png" alt="">
                        <img src="./images/shield_7.png" alt="">
                        <img src="./images/shield_8.png" alt="">
                        <img src="./images/shield_9.png" alt="">
                    </div>
                    <!-- 信息 -->
                    <div class="info"></div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="section third current" style="width:100%;height:100%;background-color: #DE8910;">
                    <!-- 信息 -->
                    <div class="info"></div>
                    <!-- 圆环 -->
                    <div class="circle"></div>
                    <!-- 火箭 -->
                    <div class="rocket"></div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="section fourth current"style="width: 100%;height:100%;background-color: #16BA9D;">
                    <!-- 搜索 -->
                    <div class="search">
                        <div class="key"></div>
                        <div class="input"></div>
                        <div class="wrap">
                            <div class="result"></div>
                        </div>
                    </div>
                    <!-- 信息 -->
                    <div class="info"></div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="section fifth current"style="width: 100%;height: 100%;background-color: #0DA5D6;">
                    <!-- 信息 -->
                    <div class="info"></div>
                    <!-- 浏览器 -->
                    <div class="broswer">
                        <!-- 四边框 -->
                        <div class="leftline"></div>
                        <div class="topline"></div>
                        <div class="rightline"></div>
                        <div class="bottomline"></div>
                        <!-- 工具栏 -->
                        <div class="toolbar"></div>
                        <!-- 边框盒子 -->
                        <div class="box">
                            <span></span>
                        </div>
                        <div class="line"></div>
                        <!-- 其它 -->
                        <div class="extra"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="./dist/js/swiper.min.js"></script>
    <script src="./js/jquery.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        //分页器
        pagination: '.swiper-pagination',
        //分页器事件
        paginationClickable: true,
        //竖直
        direction: 'vertical',

        onTouchEnd: function(swiper,even){

            $('.section').removeClass('current');

            // 延时100毫秒执行
            setTimeout(function () {

                $('.section').addClass('current');
                console.log("1");
            }, 100);

        }


    });
        window.onload = function(){
            $('.section').removeClass('current');

            // 延时100毫秒执行
            setTimeout(function () {
                $('.section').eq(0).addClass('current');
                console.log("1");
            }, 100);

        };
    </script>
</body>
</html>